<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入 vue  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>插槽slot</title>
</head>
<body>
    <!-- 
        有时我们需要多个插槽。

        对于这样的情况，<slot> 元素有一个特殊的 attribute：name。
        这个 attribute 可以用来定义额外的插槽

        一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

        使用v-slot指令来指定是占用哪个插槽。

        注意：
            v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。
     -->
   
    <div id="app">
        <!--  
           使用多个插槽，现在 <template> 元素中的所有内容都将会被传入相应的插槽。
           任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。 
        -->
        <base-layout>
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>

            <!-- <template v-slot:default> -->
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
            <!-- </template> -->

            <template v-slot:footer>
                <h2>Here's footer info</h2>
            </template>
        </base-layout>
    </div>    
</body>
</html>

<script>
    Vue.component("base-layout",{
        template:`
            <div class="container">
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <!-- 使用默认的插槽名 'default' -->
                    <slot><slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>`
    });
       
    var vm = new Vue({
        el: '#app', 
        data:{
        },
    })
</script>
